<template>
    <div class="order_box">
      <nav-com title="店铺分享" :showView="showView" @back="backHandler()"></nav-com>
       
    <!-- 分享二维码 -->
     <div class="shareboxbg"  v-show="showSharetu">
      <div class="sharebox">
        <div class="shareTU">
             <div class="tu">
              <img :src="shopDetail.banner">
             </div>
             <div class="toux">
              <img :src="shopDetail.avatar">
             </div>
             <div class="name">{{shopDetail.shopname}}</div>
             <div class="ewm">
              <img :src="img_url">
              <span>长按或扫描二维码查看详情</span>
             </div>
          </div>
          <div class="shareStyList">
             <div class="t0">分享当前图片到</div>
             <div class="styList">
                 <div class="item" @click.stop="togo(1)">
                  <img src="@/assets/friendShare/tu1.png">
                     <span>微信好友</span>
                 </div>
                 <div class="item" @click.stop="togo(2)">
                  <img src="@/assets/friendShare/tu2.png">
                     <span>朋友圈</span>
                 </div>
                 <div class="item" @click.stop="togo(3)">
                  <img src="@/assets/friendShare/tu3.png">
                     <span>保存海报</span>
                 </div>
                 <div class="item" @click.stop="togo(4)">
                  <img src="@/assets/friendShare/tu4.png">
                     <span>复制链接</span>
                 </div>
             </div>
             <!-- <div class="cancle" @click.stop="backHandler"> 取消</div> -->
          </div>
       </div>
     </div>
     <van-tabbar v-model="active" inactive-color="#222222" active-color="#FA2C1E" fixed placeholder>
      <van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index" :to="item.path">
        <span>{{ item.title }}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      </van-tabbar-item>
    </van-tabbar>
    </div>
</template>
<script>
  import {
    shopqrcode,shopdetail
  } from "@/api/api";
  import { codeLists, writeoff } from "../../api/myExaminatonGaper";
  import navCom from "@/component/nav";
  import Loading from "@/component/loading";
  import { Toast } from "vant";
  
  export default {
    name: "pay",
    components: {
      navCom,
      Loading,
    },
    data() {
      return {
        showView:true,
        showSharetu:false,
        img_url:'',
        post_url:'',
        h5_url:'',
        shop_id:'',
        active:2,
        shopDetail:{},
      tabbarList: [
      {
          path: "/allshopgoods/"+(this.$route.params["id"] || "1"),
          title: "全部商品",
          normal:require('@/assets/shop/tab01.png'),
          active:require('@/assets/shop/tab1.png'),
        },
        {
          path: "/goodsClass/"+(this.$route.params["id"] || "1"),
          title: "店铺分类",
          normal:require('@/assets/shop/tab02.png'),
          active:require('@/assets/shop/tab2.png'),
        },
        {
          path: "/shopShare/"+(this.$route.params["id"] || "1"),
          title: "分享店铺",
          normal:require('@/assets/shop/tab03.png'),
          active:require('@/assets/shop/tab3.png'),
        },
      ],
      };
    },
  //监听路由变化
  watch: {
    $route(to) {
      this.activeTab(to.path);
    },
  },
    async mounted() {
      this.toshowShare()
    },
    async created() {
      this.shop_id = this.$route.params["id"] || "1";
      this.getshopdetail();
    },
    methods: {
      backHandler() {
          this.$router.go(-1);
      },
      activeTab(path) {
      var index = this.tabbarList.map((item) => item.path).indexOf(path);
      if (index != -1) {
        this.active = index;
      }
    },
      copy(content){  
          const inputDom = document.createElement('input');
          inputDom.setAttribute('value', content);
          document.body.appendChild(inputDom);
          inputDom.select();
          document.execCommand('copy');
          document.body.removeChild(inputDom);
          Toast("复制成功")
      },
      closetank() {
        this.backHandler()
      },
      togo(type){
        if(type==1){
           if(this.$is_weixn){
             Toast('点击右上角“...”分享')
           }else if(weixin.isAndroid()&&window.JS_TROOPS){
               window.JS_TROOPS.weixinShare(this.post_url);
           }else{
             Toast('浏览器不支持')
           }
        }else if(type==2){
          if(this.$is_weixn){
              Toast('点击右上角“...”分享')
           }else if(weixin.isAndroid()&&window.JS_TROOPS){
              window.JS_TROOPS.weixinCircleFriends(this.post_url);
           }else{
             Toast('浏览器不支持')
           }
        }else if(type==3){
          if(this.$is_weixn){
              Toast('点击右上角“...”分享')
           }else if(weixin.isAndroid()&&window.JS_TROOPS){
              window.JS_TROOPS.downloadImage(this.post_url);
           }else{
             Toast('浏览器不支持')
           }
         }else if(type==4){
          this.copy(this.h5_url)
        }
      },
      toshowShare(){
          shopqrcode({ 
            link:'https://rongyaofront.bigchun.com/#/allshopgoods',
            shop_id:this.shop_id
          }).then((res) => {
            this.showSharetu=true;
            console.log("二维码分享",res.data)
            this.img_url =res.data.data.img_url 
            this.h5_url=res.data.data.h5_url
            this.post_url = res.data.data.poster_url
          });
      },
      
      getshopdetail() {
      shopdetail({ id: this.shop_id }).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data) {
            this.shopDetail = res.data.data;
          }
        }
      });
    },
    },
  };
  </script>
  <style scoped>
  
.shareboxbg{
  background: rgba(0, 0, 0, 0.75);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 44px;
}
.sharebox .shareTU{
  background: #ffffff;
    width: 250px;
    padding: 10px;
    border-radius: 12px;
    z-index: 10;
    position: absolute;
    bottom: 130px;
    left: calc(50% - 135px);
}
.sharebox .shareTU .tu img{
  width: 250px;
  max-height: 130px;
}
.sharebox .shareTU .toux{
  width: 50px;
    height: 50px;
    margin: -20px auto 0;
    border-radius: 50%;
    border: 1px solid #ffffff;
}
.sharebox .shareTU .toux img{
  width: 50px;
    height: 50px;
    border-radius: 50%;
}
.sharebox .shareTU .name{
  text-align: center;
  font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 21px;
    margin: 5px 0;
}
.sharebox .shareTU .ewm {
  display: flex;
    flex-direction: column;
    align-items: center;
}
.sharebox .shareTU .ewm img{
  width: 77px;
  margin-bottom: 10px;
}
.sharebox .shareTU .ewm span{
  font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
    display: block;
}
.shareStyList{
  clear: both;
    height: 110px;
    background: #F5F5F5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    padding-top: 50px;
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 9;
}
.shareStyList .t0{
  font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 18px;
}
.styList{
  display: flex;
    justify-content: space-evenly;
    padding: 10px 0 15px;
}
.styList .item img{
  width: 50px;

}
.styList .item span{
  font-size: 11px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 16px;
    display: block;
}
.shareStyList .cancle{
  background: #FFFFFF;
    line-height: 43px;
}
  </style>
  